<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>资料修改</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="css/updata_information.css"/>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/jquery.cookie.js"></script>
</head>
<body>
    <div class="container" id="top">
        <div class="row">
            <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6" id="welcome">
                <div class="row">
                    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4"></div>
                    <div class="col-xs-3 col-sm-3 col-md-3col-lg-3" id="user_hover"></div>
                </div>
            </div>
            <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5" id="menu">
                <div class="row">
                    <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2" id="order_father">
                        <p>我的订单&nbsp;<img class="down_arrow" src="images/index/down_arrow.png"/></p>
                        <div class="child" id="order_child">
                            <p>订单一</p>
                            <p>订单二</p>
                        </div>
                    </div>
                    <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2"  id="cart_father">
                        <p><img class="top_logo" src="images/index/shoppingcart.png"/>&nbsp;购物车&nbsp;<img class="down_arrow" src="images/index/down_arrow.png"/></p>
                        <div class="child" id="cart_child">
                            <p>商品一</p>
                            <p>商品二</p>
                        </div>
                    </div>
                    <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2" id="collection_father">
                        <p><img class="top_logo" src="images/index/unselected_collection.png"/>&nbsp;收藏夹&nbsp;<img class="down_arrow" src="images/index/down_arrow.png"/></p>
                        <div class="child" id="good_child">
                            <p>收藏的店铺</p>
                            <p>收藏的果蔬</p>
                        </div>
                    </div>
                    <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2" id="receive_address_father">
                        <p>收货地址&nbsp;<img class="down_arrow" src="images/index/down_arrow.png"/></p>
                        <div class="child" id="receive_address__child">
                            <p>收货地址一</p>
                            <p>收货地址二</p>
                        </div>
                    </div>
                    <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2" id="shop_father">
                        <p><img class="top_logo" src="images/index/shop.png"/>&nbsp;我的店铺<img class="down_arrow" src="images/index/down_arrow.png"/></p>
                        <div class="child" id="shop_child">
                            <p>店铺一</p>
                            <p>店铺二</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container" id="information">
        <div class="row">
            <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2"></div>
            <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2" id="information_left">
                <h1>账号设置</h1>
                <h2 class="choise" id="type1">资料修改</h2>
                <h2 class="unchoise" id="type2">密码修改</h2>
            </div>
            <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6" id="information_right">

            </div>
        </div>
    </div>
    <script type="text/javascript">

        // <!--判断是否已经登陆过-->
        function hasLogin() {

            var userId = $.cookie("userId");

            //Cooklie中没有userId则未登录，否则已登陆，根据userId向后台查询用户信息。
            if (userId == null){
                var wel = '<p id="welcome_p"><a href="login.html">前往登录</a>&nbsp;<a href="register.html">免费注册</a></p>';
                $("#welcome").html(wel);
            }else {
                $.post("user/information",{userId:userId},function (data) {
                    var json = JSON.parse(data);
                    var wel = '';
                    if (json.username != null){
                        wel = '<div class="row"><div class="col-xs-4 col-sm-4 col-md-4 col-lg-4"></div><div class="col-xs-3 col-sm-3 col-md-3 col-lg-3" id="user_hover"><p>欢迎您,&nbsp;'+ json.username +'<img class="down_arrow" src="images/index/down_arrow.png"/></p></div></div>';
                    }else {
                        wel = '<p>欢迎您,&nbsp;fvonline_'+ json.id +'<img class="down_arrow" src="images/index/down_arrow.png"/></p>';
                    }
                    wel += '<div class="child" id="welcome_child"><img id="hs" src='+ "/FVOnline/user/getHS?userId=" + userId +' /><p id="integral">我的积分：<span>'+ json.integral +'</span></p><p id="updateInformation_exit"><a href="updata_information.html">修改信息&nbsp;&nbsp;</a><a id="exit">退出</a></p></div>';
                    $("#user_hover").html(wel);

                    $("#exit").click(function () {
                        $.removeCookie('userId',{ path: '/'})

                        location.href = "login.html";
                    });

                    $("#user_hover").hover(function () {
                        $("#user_hover").addClass("divHover");
                        $("#welcome_child").removeClass("child");
                    },function () {
                        $("#user_hover").removeClass("divHover");
                        $("#welcome_child").addClass("child");
                    });

                });
            }
        }

        function loadInformation(){

            var userId = $.cookie("userId");

            $.post("user/information",{userId:userId},function (data) {

                var json = JSON.parse(data);

                var wel = '<div id="update_hs">\n' +
                    '           <div id="hs_details">当前头像：</div>\n' +
                    '           <div id="hs_img_box"><img id="hs_img" src='+ "/FVOnline/user/getHS?userId=" + userId +' /></div>\n' +
                    '           <div class="child" id="changeHS"><input type="file" id="hsImg" title="" accept="image/png,image/jpeg">更换头像</div>\n' +
                    '       </div>\n' +
                    '       <div class="update_information">\n' +
                    '           昵&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;称：<input class="username_name" id="changeUsername" type="text" />' +
                    '       </div>\n' +
                    '       <div class="update_information">\n' +
                    '           姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名：<input class="username_name" id="changeName" type="text" />' +
                    '       </div>\n' +
                    '       <div class="update_information">\n' +
                    '            性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别：<input id="man" type="radio" name="sex" value="男">男 <input type="radio" name="sex" id="woman" value="女">女 \n' +
                    '       </div>\n' +
                    '       <div class="update_information">\n' +
                    '            出生日期：<input id="birthday" class="username_name" type="date"> \n' +
                    '       </div>\n' +
                    '       <button id="save">保存并返回</button>';

                $("#information_right").html(wel);

                if (json.username != null){
                    $("#changeUsername").val(json.username);
                }

                if (json.name != null){
                    $("#changeName").val(json.name);
                }

                if (json.sex != null){
                    if (json.sex == "男"){
                        $("#man").attr("checked","checked");
                    }
                    if (json.sex == "女"){
                        $("#woman").attr("checked","checked");
                    }
                }else {
                    $("#man").attr("checked","checked");

                }

                if(json.birthday != null){
                    $("#birthday").val(json.birthday);
                }

                $("#hs_img").hover(function () {
                    $("#changeHS").removeClass("child");
                },function () {
                    $("#changeHS").hover(function () {
                        $("#changeHS").removeClass("child");
                    },function () {
                        $("#changeHS").addClass("child");
                    })
                    $("#changeHS").addClass("child");
                });

                $("#save").click(function () {
                    var username = $("#changeUsername").val();
                    var name = $("#changeName").val();
                    var sex = $("input[name='sex']:checked").val();
                    var birthday = $("#birthday").val();
                    $.get("user/updateInformation",{userId:userId,username:username,name:name,sex:sex,birthday:birthday},function (data) {
                        var dataJson = JSON.parse(data);
                        if (dataJson.code.toLowerCase() == "success"){
                            location.href = "index.html";
                        }else{
                            alert("修改失败！");
                        }
                    })
                });

                $("#changeHS").click(function () {
                    $("#hsImg").change(function () {
                        if ($("#hsImg").val()!=null && $("#hsImg").val().length > 0){
                            var formData = new FormData();
                            formData.append('file', $("#hsImg")[0].files[0]); // 固定格式
                            formData.append('userId', userId);
                            $.ajax({
                                url: "user/updateHS",														//后台接收数据地址
                                //headers:{'Content-Type':'multipart/form-data'},//加上这个报错
                                data:formData,
                                type: "POST",
                                dataType: "json",
                                cache: false,			//上传文件无需缓存
                                processData: false,		//用于对data参数进行序列化处理 这里必须false
                                contentType: false,
                                mimeType: "multipart/form-data",
                                success:function(data){
                                    if (data.code.toLowerCase() == "success"){
                                        window.location.reload();
                                    }else{
                                        alert("上传失败！");
                                    }
                                }
                            });
                        }
                    });
                   
                });
            });

        }

        hasLogin();
        loadInformation();



        $("#type2").click(function () {
            $("#type1").removeClass("choise");
            $("#type1").addClass("unchoise");
            $("#type2").removeClass("unchoise");
            $("#type2").addClass("choise");

            $("#information_right").html('<div>\n' +
                '                             <div class="password" id="updatePassword">\n' +
                '                                   密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码：<input type="password" id="password"/>\n' +
                '                             </div>  \n'+
                '                             <div class="password">\n' +
                '                                  确认密码：<input type="password" id="ensurePassword" \>\n' +
                '                             </div>\n' +
                '                             <button id="ensure_update">确认修改</button><button id="back">返回</button>\n'+
                '                         </div>');

            $("#password").blur(function () {

                var password_reg = /^[A-Za-z\d!"#$%&'()*+,-.<=>?@[\]^_`{|}~]{6,16}$/;

                var password = $("#password").val();

                var flag = password_reg.test(password);

                if (!flag){
                    $("#password").addClass("error_input");
                }

            });

            $("#password").focus(function () {

                $("#password").removeClass("error_input");

            });

            $("#ensurePassword").blur(function () {

                var password_reg = /^[A-Za-z\d!"#$%&'()*+,-.<=>?@[\]^_`{|}~]{6,16}$/;

                var password = $("#ensurePassword").val();

                var flag = password_reg.test(password);

                if (!flag){
                    $("#ensurePassword").addClass("error_input");
                }

            });

            $("#ensurePassword").focus(function () {

                $("#ensurePassword").removeClass("error_input");

            });

            function isNormalInput(ipt){
                return ipt.val() != null && ipt.val().length != 0 && !ipt.hasClass("error_input");
            }

            $("#ensure_update").click(function () {

                if (isNormalInput($("#password")) && isNormalInput($("#ensurePassword"))){

                    var password = $("#password").val();

                    var ensurePassword = $("#ensurePassword").val();

                    if (password != ensurePassword){
                        alert("两次输入的密码不一致");
                    } else {

                        var userId = $.cookie("userId");

                        $.post("user/updatePassword",{userId:userId,password:password},function (data) {
                            var dataJson = JSON.parse(data);
                            if (dataJson.code.toLowerCase() == "success"){

                                $.removeCookie('userId',{ path: '/'})

                                location.href = "login.html";

                            }else{
                                alert("修改失败！");
                            }
                        });
                    }

               }else {
                    if (!isNormalInput($("#password"))){
                        if (!$("#password").hasClass("error_inout")){
                            $("#password").addClass("error_input");
                        }
                    }
                    if (!isNormalInput($("#ensurePassword"))){
                        if (!$("#ensurePassword").hasClass("error_inout")){
                            $("#ensurePassword").addClass("error_input");
                        }
                    }
                }
            });

            $("#back").click(function () {
                location.href = "index.html";
            })

        });

        $("#type1").click(function () {
            $("#type2").removeClass("choise");
            $("#type2").addClass("unchoise");
            $("#type1").removeClass("unchoise");
            $("#type1").addClass("choise");
            loadInformation();
        });



    </script>
</body>
</html>